<template>
    <div class="assing">
        <el-dialog :model-value="showFormVisible" title="分配角色" @close="closeFn">
            <el-form>
                <el-form-item>
                    <!-- v-model="value1"   -->
                    <el-select multiple style="width: 240px">
                        <el-option v-for="item in arr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="qx">取消</el-button>
                    <el-button type="primary" @click="qd">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import * as http from "@/request/http"
let arr = ref()
onMounted(() => {
    http.admin.listAllHttp().then(res => {
        arr.value = res.data
        console.log(arr);
    })
})
const emit = defineEmits(["qx", "qd"])
const props = withDefaults(defineProps<{ showFormVisible: boolean, assignID: number }>(), {
    showFormVisible: false,
    assignID: 0
})
const qx = () => {
    emit("qx")
}
const closeFn = () => {
    emit("qx")
}
const qd = () => {
    ElMessageBox.confirm(
        '此操作将修改当前用户角色, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 提示
            ElMessage.success("操作成功!")
            // 退出
            emit("qd")
        })
        .catch(() => {
            ElMessage.warning("取消当前操作!")
        })
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 420px
}

:deep(.el-button) {
    height: 40px;
    width: 75px;
}
</style>